<!--业务对比分析-->
<template>
	<div class="business_comparative_analysis_container">
		<!-- 搜索表单 -->
		<div>
			<el-form :inline="true" v-model="formData">
				<div style="padding: 5px; max-height: 190px; overflow: hidden auto">
					<!-- 切换对比方式 -->
					<el-form-item label="方式">
						<el-radio-group v-model="comparativeType" @change="handleComparativeTypeChange">
							<el-radio :label="1">同业务</el-radio>
							<el-radio :label="2">不同业务</el-radio>
						</el-radio-group>
					</el-form-item>
					<div class="findForm" v-for="(item, index) in form.dynamicItem" :key="index">
						<!-- 系统-->
						<el-form-item label="系统">
							<el-select v-model="item.systemId" placeholder="所有系统" :disabled="comparativeType === 1 && index >= 1">
								<el-option
									@click.native="selectFn(item, index)"
									v-for="system in allSystem"
									:key="system.value"
									:label="system.label"
									:value="system.value"
								/>
							</el-select>
						</el-form-item>

						<!-- 业务-->
						<el-form-item label="业务">
							<el-select v-model="item.businessCode" placeholder="请选择" :disabled="comparativeType === 1 && index >= 1">
								<el-option
									v-for="business in allBusiness[index]"
									@click.native="(val) => changeBusiness(business.value, index)"
									:key="business.id"
									:label="business.label"
									:value="business.value"
									:disabled="isDisabledBusinessOption(business.value)"
								/>
							</el-select>
						</el-form-item>

						<!--自定义时间-->
						<el-form-item label="时间范围" v-show="comparativeType === 1">
							<el-date-picker
								type="date"
								v-model="item.timeDate"
								:picker-options="datePickerOptions2"
								:clearable="false"
								format="YYYY 年 MM 月 DD 日 "
								value-parseTime="yyyy-MM-dd 00:00:00"
								@change="() => handleTimeDateChange(index)"
							></el-date-picker>
						</el-form-item>
						<el-form-item label="时间范围" v-show="comparativeType === 2">
							<el-date-picker
								v-model="timeRange"
								:picker-options="datePickerOptions"
								:clearable="false"
								type="datetimerange"
								align="right"
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-parseTime="yyyy-MM-dd HH:mm:00"
								@change="() => handleTimeRangeChange()"
								:disabled="index >= 1"
							></el-date-picker>
						</el-form-item>

						<!--  添加对比按钮-->
						<el-form-item v-if="index === form.dynamicItem.length - 1 && index !== 2">
							<el-button type="success" style="margin-top: 4px; margin-right: 10px" @click="addItem(index)">添加对比 </el-button>
						</el-form-item>
						<!--  删除对比按钮-->
						<el-form-item v-if="index !== 0">
							<el-button type="danger" @click="deleteItem(index)">删除对比 </el-button>
						</el-form-item>
						<!-- 搜索按钮-->
						<el-form-item v-if="index === 0">
							<el-button type="primary" @click="submitForm">查询</el-button>
						</el-form-item>
					</div>
				</div>
			</el-form>
		</div>
		<!-- 列表 -->
		<!--    <YdCard>-->
		<div class="yd-flex1 yd-card-header">
			<i class="yd-circle"></i>
			<span class="yd-card-title" style="margin-right: 18px">性能指标概况</span>
			<el-tooltip
				effect="light"
				content=" 该数据为你显示:性能指标在所选时间段的总体表现。当前值:所选时间段内指标的总体情况。环比:与上一个相邻时间段(如前一天)的环比变化率。同比:与上个月同期的同比变化率。  "
				placement="top-start"
				style="z-index: 999"
			>
				<i class="question-icon">
					<svg-icon icon-class="question"></svg-icon>
				</i>
			</el-tooltip>
		</div>
		<YdTable :formData="formData" :tableConfig="tableConfig" :tableData="tableData.data"></YdTable>
		<!--    </YdCard>-->

		<!-- 趋势图 -->
		<div v-loading="loadintCharts" style="margin-top: 18px">
			<!--      <el-row>-->
			<el-row :gutter="20">
				<!--  交易量  -->
				<YdSmoonthLine
					v-if="flag"
					:Id="'volumeOfBusiness'"
					:lineTitle="'交易量'"
					ref="trade"
					:echartsData="series1"
					:xAxis="xAxis"
					:businessName="businessName"
					style="width: 500px"
				></YdSmoonthLine>
				<!--  平均办理时长  -->
				<YdSmoonthLine
					v-if="flag"
					:Id="'averageProcessingTime'"
					:lineTitle="'平均办理时长'"
					ref="avarageAdd"
					:echartsData="series2"
					:xAxis="xAxis"
					:businessName="businessName"
				></YdSmoonthLine>
			</el-row>

			<el-row :gutter="20">
				<!--  平均服务端耗时  -->
				<YdSmoonthLine
					v-if="flag"
					:Id="'averageProcessingTimeOfServer'"
					:lineTitle="'平均服务端耗时'"
					ref="avarageServerTime"
					:echartsData="series3"
					:xAxis="xAxis"
					:businessName="businessName"
				></YdSmoonthLine>

				<!-- 健康度 -->
				<YdSmoonthLine
					v-if="flag"
					:Id="'health'"
					:lineTitle="'健康度'"
					ref="health"
					:echartsData="series4"
					:xAxis="xAxis"
					:businessName="businessName"
				></YdSmoonthLine>
			</el-row>
			<!--      </el-row>-->
		</div>
	</div>
</template>
<script setup name="BusinessComparativeAnalysis" lang="tsx">
import { ref, reactive, onMounted, getCurrentInstance } from 'vue';
import { queryAppSystemOptions, queryBusinessOptions } from '@/api/search/searchOptions.js';
import { queryPerformanceIndexSurvey, getContrastiveCharts } from '@/api/bpm/business/business_comparative_analysis';

import YdSmoonthLine from '@/components/YdSmoonthLine/index.vue';

import { parseTime } from '@/utils/common';
import { DateModelType } from 'element-plus';


const instance = getCurrentInstance();
const proxy = instance?.proxy;

const loadintCharts = ref(false);
// 获取到当前的业务名字给折线图
const businessName: any[] = [];
// 最新搜索表单
const form = reactive<FormModelType>({
	systemId: '',
	businessCode: '',
	timeRange: '',
	dynamicItem: [
		{
			systemId: undefined,
			businessCode: '',
			timeDate: '',
			timeRange: undefined,
			time: [],
		},
	],
});

// 获取自定义组件当前选中的时间
const currentCUstomTime = ref([]);
// 异步数据获取后才将数据传给子组件,不然子组件无值
const flag = ref(false);
// 设置日期只能选最近7天的时间
const datePickerOptions = reactive({
	// 禁选日期
	disabledDate(time: Date) {
		return time.getTime() > Date.now();
	},
	// 日期范围选择，只允许选择某一天的日期范围，不能垮天
	onPick(sel: anyObj) {
		const minD = sel.minDate;
		if (minD) {
			const today = new Date();
			const maxDTime = minD.getTime() + 24 * 60 * 60 * 1000;
			if (maxDTime > today.getTime()) {
				// 如果比当前时间大，则取当前时间
				proxy?.$emit('pick', [minD, today]);
			} else {
				proxy?.$emit('pick', [minD, new Date(maxDTime)]);
			}
		}
	},
});
const datePickerOptions2 = reactive({
	// 禁选日期
	disabledDate(time: Date) {
		return time.getTime() > Date.now();
	},
});
// 时间自定义选中
const timeRange = ref<[DateModelType, DateModelType]>();
// 下拉选择系统
const allSystem = ref<any[]>([]);
// 下拉选择所有业务
const allBusiness = ref<any[]>([]);
// echarts x轴数据
const xAxis = ref<any[]>([]);
// echarts后台返回的数据
const contrastData = reactive<anyObj>({});
// 搜索表单数据
const formData = reactive<FormModelType>({});
// 对比方式
const comparativeType = ref(1);
// 列表配置
const tableConfig = reactive<TableConfigType>({
	/*url: 'queryPerformanceIndexSurvey',*/
	disableOrderNumber: true,
	columns: [],
	pagination: {
		pageNum: 1,
	},
	loading: true,
});
// 列表数据
const tableData = reactive({
	data: [],
});
const series1 = ref<any[]>([]);
const series2 = ref<any[]>([]);
const series3 = ref<any[]>([]);
const series4 = ref<any[]>([]);
const lastMonth = ref('');
const yesterDay = ref('');
const currentTime = ref('');
onMounted(() => {
	initIndexPage();
});

// 初始化
function initIndexPage() {
	new Promise((resolve) => {
		queryAppSystemOptions().then((res: ApiResponse) => {
			if (res.code === 0) {
				if (res.data instanceof Array) {
					// res.data.forEach((item) => {
					// 	item.value = item.value;
					// });
					allSystem.value = res.data;
					const sId = allSystem.value[0].value;
					form.dynamicItem[0].systemId = sId;
					form.dynamicItem[0].systemName = allSystem.value[0].label;
					console.log('systemid', allSystem);
					console.log('form.dynamicItem', form.dynamicItem);
					resolve(sId);
				}

				resolve('sucess');
			}
			resolve('sucess');
		});
	})
		.then((val) => {
			return new Promise((resolve) => {
				queryBusinessOptions(val).then((res: ApiResponse) => {
					allBusiness.value[0] = res.data;
					allBusiness.value[0].unshift({ code: '', label: '所有业务' });
					const bCode = allBusiness.value[0][0].value;
					console.log('allBusiness------------------', allBusiness);
					resolve(bCode);
				});
			});
		})
		.then((val) => {
			convert();
			submitForm();
		});
}

// 进页面给默认值初始化
function convert() {
	let now = new Date();
	// 默认最近一小时
	let startTimeStr = parseTime(now.getTime(), '{y}-{m}-{d}') + ' 00:00:00';
	let endTimeStr = parseTime(now.getTime(), '{y}-{m}-{d} {h}:{i}:00');
	timeRange.value = [startTimeStr, endTimeStr];
	form.dynamicItem[0].timeDate = startTimeStr;
	form.dynamicItem[0].time = [startTimeStr, endTimeStr];
	// 传给折线图的业务名字
	businessName[0] = form.dynamicItem[0].systemName + '(' + allBusiness.value[0][0].label + ')';
}

// 根据选中的系统id请求后台获取所有业务
function selectFn(obj: anyObj, index: number) {
	for (var j of allSystem.value) {
		if (obj.systemId == j.value) {
			form.dynamicItem[index].businessCode = '';
			form.dynamicItem[index].businessName = j.label + '(所有业务)';
			businessName[index] = j.label + '(所有业务)';
		}
	}
	syncByComparativeType('system', form.dynamicItem[index]);
	getBusinessBySystemId(obj.systemId, index);
}

// 根据系统id查询业务
function getBusinessBySystemId(id: any, index: number) {
	queryBusinessOptions(id).then((res: ApiResponse) => {
		if (res.code !== 0) {
			return;
		}
		res.data.unshift({ code: '', label: '所有业务' });
		if (comparativeType.value === 1) {
			for (let i = 0; i < allBusiness.value.length; i++) {
				// proxy?.$set(allBusiness, i, res.data);
				allBusiness.value[i] = res.data;
			}
		} else {
			// proxy?.$set(allBusiness, index, res.data);
			allBusiness.value[index] = res.data;
		}
		syncByComparativeType('business', form.dynamicItem[index]);
	});
}

// 分析是否重复选择同一个系统的业务
function changeBusiness(businessId: string, index: number) {
	// 获取到当前业务编码对应的label,并赋值给业务名称数组
	console.log('changeBusiness---------------------', businessId);
	let selectedBusinessName = allBusiness.value[index].filter(function (item: anyObj) {
		return item.value === businessId;
	});
	console.log('allSystem.value', allSystem.value);
	console.log('orm.dynamicItem[index].businessName', form.dynamicItem[index]);
	for (var j of allSystem.value) {
		if (form.dynamicItem[index].systemId == j.value) {
			const businessNameStr = j.label + '(' + selectedBusinessName[0].label + ')';
			form.dynamicItem[index].businessName = businessNameStr;
			businessName[index] = businessNameStr;
		}
	}
	syncByComparativeType('business', form.dynamicItem[index]);
}

// 点击提交对比分析表单数据
function submitForm() {
	const distinctArr: any[] = [],
		distinctArr2: any[] = [],
		distinctArr3: any = [];
	if (comparativeType.value === 1) {
		form.dynamicItem.forEach((item: anyObj, index: number) => {
			handleTimeDateChange(index);
			distinctArr.push(parseTime(item.timeDate, '{y}-{m}-{d}'));
			distinctArr2.push(item.businessCode);
			distinctArr3.push(item.systemId);
		});
		const len = distinctArr.length;
		if (len !== Array.from(new Set(distinctArr)).length) {
			proxy?.$message.warning('同业务对比需选择不同的日期');
			return;
		}
		const len3 = distinctArr3.length;
		if (len3 > 1 && Array.from(new Set(distinctArr3)).length !== 1) {
			proxy?.$message.warning('同业务对比需选择相同的系统');
			return;
		}
		const len2 = distinctArr2.length;
		if (len2 > 1 && Array.from(new Set(distinctArr2)).length !== 1) {
			proxy?.$message.warning('同业务对比需选择相同的业务');
			return;
		}
	} else if (comparativeType.value === 2) {
		// 选所有业务时不进行校验
		form.dynamicItem.forEach((item: anyObj) => {
			distinctArr.push(item.systemId + '_' + item.businessCode);
		});
		const len = distinctArr.length;
		if (len !== Array.from(new Set(distinctArr)).length) {
			proxy?.$message.warning('不同业务对比需选择不同的系统/系统业务');
			return;
		}
	}
	if (comparativeType.value === 1) {
		form.dynamicItem.forEach((item: anyObj, index: number) => {
			const timeStr = parseTime(item.timeDate, '{y}-{m}-{d}');
			if (typeof item.businessName === 'string') {
				const inx = item.businessName.indexOf('\n');
				if (inx < 0) {
					item.businessName = timeStr + '\n' + item.businessName;
				} else {
					item.businessName = timeStr + '\n' + item.businessName.substring(inx + 1);
				}
			}
			if (typeof businessName[index] === 'string') {
				const inx = businessName[index].indexOf('\n');
				if (inx < 0) {
					businessName[index] = timeStr + '\n' + businessName[index];
				} else {
					businessName[index] = timeStr + '\n' + businessName[index].substring(inx + 1);
				}
			}
		});
	} else {
		for (let i = 0; i < businessName.length; i++) {
			const inx = businessName[i].indexOf('\n');
			if (inx > 0) {
				businessName[i] = businessName[i].substring(inx + 1);
			}
		}
	}

	handlerFormData();
	// 查询性能指标概况列表
	searchListHandler();
	// 查询折线图数据
	searchChartHandler();
	flag.value = true;
}

function gettableConfig() {
	let contrastItems = form.dynamicItem;
	// 判断是否选中相同的业务
	if (contrastItems.length === 2) {
		// 2条对比
		tableConfig.columns = [
			{
				label: '关键指标',
				prop: 'merit',
			},
			{
				label: businessName[0],
				prop: 'basic',
				formatter(row, val) {
					let rowName = row.merit;
					switch (rowName) {
						case '成功率':
							return val + '%';
						case '健康度':
							return val + '%';
						case '失败数':
							return val + '次';
						case '告警数':
							return val + '次';
						case '平均服务端耗时':
							return val + 'ms';
						case '平均网络传输耗时':
							return val + 'ms';
						case '平均办理时长':
							return val + 'ms';
						case '交易量':
							return val + '次';
						case '访问量':
							return val + '次';
						default:
							break;
					}
				},
			},
			{
				label: businessName[1],
				prop: 'yeal',
				formatter(row, val) {
					let rowName = row.merit;
					switch (rowName) {
						case '成功率':
							return val + '%';
						case '健康度':
							return val + '%';
						case '失败数':
							return val + '次';
						case '告警数':
							return val + '次';
						case '平均服务端耗时':
							return val + 'ms';
						case '平均网络传输耗时':
							return val + 'ms';
						case '平均办理时长':
							return val + 'ms';
						case '交易量':
							return val + '次';
						case '访问量':
							return val + '次';
						default:
							break;
					}
				},
			},
		];
	} else if (contrastItems.length === 3) {
		// 3条对比
		tableConfig.columns = [
			{
				label: '关键指标',
				prop: 'merit',
			},
			{
				label: businessName[0],
				prop: 'basic',
				formatter(row, val) {
					let rowName = row.merit;
					switch (rowName) {
						case '成功率':
							return val + '%';
						case '健康度':
							return val + '%';
						case '失败数':
							return val + '次';
						case '告警数':
							return val + '次';
						case '平均服务端耗时':
							return val + 'ms';
						case '平均网络传输耗时':
							return val + 'ms';
						case '平均办理时长':
							return val + 'ms';
						case '交易量':
							return val + '次';
						case '访问量':
							return val + '次';
						default:
							break;
					}
				},
			},
			{
				label: businessName[1],
				prop: 'yeal',
				formatter(row, val) {
					let rowName = row.merit;
					switch (rowName) {
						case '成功率':
							return val + '%';
						case '健康度':
							return val + '%';
						case '失败数':
							return val + '次';
						case '告警数':
							return val + '次';
						case '平均服务端耗时':
							return val + 'ms';
						case '平均网络传输耗时':
							return val + 'ms';
						case '平均办理时长':
							return val + 'ms';
						case '交易量':
							return val + '次';
						case '访问量':
							return val + '次';
						default:
							break;
					}
				},
			},
			{
				label: businessName[2],
				prop: 'chain',
				formatter(row, val) {
					let rowName = row.merit;
					switch (rowName) {
						case '成功率':
							return val + '%';
						case '健康度':
							return val + '%';
						case '失败数':
							return val + '次';
						case '告警数':
							return val + '次';
						case '平均服务端耗时':
							return val + 'ms';
						case '平均网络传输耗时':
							return val + 'ms';
						case '平均办理时长':
							return val + 'ms';
						case '交易量':
							return val + '次';
						case '访问量':
							return val + '次';
						default:
							break;
					}
				},
			},
		];
	} else {
		// 1条对比
		tableConfig.columns = [
			{
				label: '关键指标',
				prop: 'merit',
			},
			{
				label: '当前值(' + currentTime.value + ')',

				prop: 'basic',
				formatter(row, val) {
					let rowName = row.merit;
					switch (rowName) {
						case '成功率':
							return val + '%';
						case '健康度':
							return val + '%';
						case '失败数':
							return val + '次';
						case '告警数':
							return val + '次';
						case '平均服务端耗时':
							return val + 'ms';
						case '平均网络传输耗时':
							return val + 'ms';
						case '平均办理时长':
							return val + 'ms';
						case '交易量':
							return val + '次';
						case '访问量':
							return val + '次';
						default:
							break;
					}
				},
			},
			{
				label: '环比 (' + yesterDay.value + ')',
				prop: 'yeal',
				renderXss: (row: anyObj, val: any) => {
					let rowName = row.merit;
					let sum1: number = row.basic || 0;
					let sum2: number = row.yeal || 0;
					let calcuVal = 0;
					let yealCompare = '';
					calcuVal = sum2 > 0 ? Math.floor(((sum1 - sum2) / sum2) * 100 * 100) / 100 : -Math.floor(sum1 * 100) / 100;
					yealCompare = sum2 > 0 ? Math.floor(((sum1 - sum2) / sum2) * 100 * 100) / 100 + '%' : '-' + sum1.toFixed(2) + '%';
					let text = '';
					switch (rowName) {
						case '成功率':
							text = val + '%' + '(' + yealCompare + ')';
							break;
						case '健康度':
							text = val + '%' + '(' + yealCompare + ')';
							break;
						case '失败数':
							text = val + '次' + '(' + yealCompare + ')';
							break;
						case '告警数':
							text = val + '次' + '(' + yealCompare + ')';
							break;
						case '平均服务端耗时':
							text = val + 'ms' + '(' + yealCompare + ')';
							break;
						case '平均网络传输耗时':
							text = val + 'ms' + '(' + yealCompare + ')';
							break;
						case '平均办理时长':
							text = val + 'ms' + '(' + yealCompare + ')';
							break;
						case '交易量':
							text = val + '次' + '(' + yealCompare + ')';
							break;
						case '访问量':
							text = val + '次' + '(' + yealCompare + ')';
							break;
						default:
							break;
					}
					return (
						<span>
							{text} <svg-icon icon-class={getRowIcon(calcuVal)}></svg-icon>
						</span>
					);
				},
			},
			{
				label: '同比 (' + lastMonth.value + ')',
				prop: 'chain',
				renderXss: (row: anyObj, val: any) => {
					let rowName = row.merit;
					let sum1: number = row.basic;
					let sum2: number = row.chain;
					let calcuVal = 0;
					let chainCompare = '';

					calcuVal = sum2 > 0 ? Math.floor(((sum1 - sum2) / sum2) * 100 * 100) / 100 : -Math.floor(sum1 * 100) / 100;
					chainCompare = sum2 > 0 ? Math.floor(((sum1 - sum2) / sum2) * 100 * 100) / 100 + '%' : sum1.toFixed(2) + '%';

					let text = '';
					switch (rowName) {
						case '成功率':
							text = val + '%' + '(' + chainCompare + ')';
							break;
						case '健康度':
							text = val + '%' + '(' + chainCompare + ')';
							break;
						case '失败数':
							text = val + '次' + '(' + chainCompare + ')';
							break;
						case '告警数':
							text = val + '次' + '(' + chainCompare + ')';
							break;
						case '平均服务端耗时':
							text = val + 'ms' + '(' + chainCompare + ')';
							break;
						case '平均网络传输耗时':
							text = val + 'ms' + '(' + chainCompare + ')';
							break;
						case '平均办理时长':
							text = val + 'ms' + '(' + chainCompare + ')';
							break;
						case '交易量':
							text = val + '次' + '(' + chainCompare + ')';
							break;
						case '访问量':
							text = val + '次' + '(' + chainCompare + ')';
							break;
						default:
							break;
					}
					return (
						<span>
							{text} <svg-icon icon-class={getRowIcon(calcuVal)}></svg-icon>
						</span>
					);
				},
			},
		];
	}
}

// 提交表单数据赋值
function handlerFormData() {
	let myFormData: anyObj = {};
	myFormData.id = '';
	console.log('form---1', form);
	if (form.dynamicItem.length === 1) {
		//一个业务时
		myFormData.systemCode = form.dynamicItem[0].systemId;
		myFormData.businessCode = form.dynamicItem[0].businessCode;
		myFormData.startTime = form.dynamicItem[0].time[0];
		myFormData.endTime = form.dynamicItem[0].time[1];
	} else if (form.dynamicItem.length === 2) {
		//两个业务时
		myFormData.id = '1';
		myFormData.systemCode = form.dynamicItem[0].systemId;
		myFormData.businessCode = form.dynamicItem[0].businessCode;
		myFormData.startTime = form.dynamicItem[0].time[0];
		myFormData.endTime = form.dynamicItem[0].time[1];
		myFormData.systemCodes = form.dynamicItem[1].systemId;
		myFormData.businessCodes = form.dynamicItem[1].businessCode;
		myFormData.startTimes = form.dynamicItem[1].time[0];
		myFormData.endTimes = form.dynamicItem[1].time[1];
	} else if (form.dynamicItem.length === 3) {
		//有三个业务时
		myFormData.id = '1';
		myFormData.systemCode = form.dynamicItem[0].systemId;
		myFormData.businessCode = form.dynamicItem[0].businessCode;
		myFormData.startTime = form.dynamicItem[0].time[0];
		myFormData.endTime = form.dynamicItem[0].time[1];
		myFormData.systemCodes = form.dynamicItem[1].systemId;
		myFormData.businessCodes = form.dynamicItem[1].businessCode;
		myFormData.startTimes = form.dynamicItem[1].time[0];
		myFormData.endTimes = form.dynamicItem[1].time[1];
		myFormData.systemCodess = form.dynamicItem[2].systemId;
		myFormData.businessCodess = form.dynamicItem[2].businessCode;
		myFormData.startTimess = form.dynamicItem[2].time[0];
		myFormData.endTimess = form.dynamicItem[2].time[1];
	}
	myFormData.tableSuffix = 'm';
	formData.value = myFormData;
	formData.comparativeType = comparativeType.value;
	return myFormData;
}

// 新增记录数组删除条件
function addItem(index: number) {
	// 限制总的搜索记录为3
	if (form.dynamicItem.length < 3) {
		form.dynamicItem.splice(index + 1, 0, {
			systemId: undefined,
			businessCode: undefined,
			timeRange: undefined,
			time: [],
		});
		// 点击添加对比的时候,将对比的记录与当前的记录值默认相同
		form.dynamicItem[index + 1].systemId = form.dynamicItem[index].systemId;
		// selectFn({systemId: form.dynamicItem[index + 1].systemId}, index + 1)
		form.dynamicItem[index + 1].businessCode = form.dynamicItem[index].businessCode;
		form.dynamicItem[index + 1].timeRange = form.dynamicItem[index].timeRange;
		// proxy?.$set(
		//     form.dynamicItem[index + 1],
		//     "timeDate",
		//     form.dynamicItem[index].timeDate
		// );
		form.dynamicItem[index + 1].timeDate = form.dynamicItem[index].timeDate;
		form.dynamicItem[index + 1].time[0] = form.dynamicItem[index].time[0];
		form.dynamicItem[index + 1].time[1] = form.dynamicItem[index].time[1];

		businessName[index + 1] = businessName[0];

		allBusiness.value[index + 1] = JSON.parse(JSON.stringify(allBusiness.value[index]));
	}
}

// 移除记录数组删除条件
function deleteItem(index: number) {
	if (form.dynamicItem.length > 1) {
		form.dynamicItem.splice(index, 1);
	}
	businessName.splice(index, 1);
}

// 查询性能指标概况列表
function searchListHandler() {
	tableConfig.loading = true;
	queryPerformanceIndexSurvey(formData.value).then((res: ApiResponse) => {
		tableConfig.loading = false;
		if (res.code !== 0) {
			proxy?.$message.warning(res.msg);
			return;
		}
		tableData.data = res.data.list;
		lastMonth.value = res.data.lastMonth ? res.data.lastMonth : '';
		yesterDay.value = res.data.yesterDay ? res.data.yesterDay : '';
		currentTime.value = res.data.currentTime ? res.data.currentTime : '';
		gettableConfig();
	});
}

// 查询折线图数据
function searchChartHandler() {
	loadintCharts.value = true;
	getContrastiveCharts(formData.value).then((res: ApiResponse) => {
		loadintCharts.value = false;
		if (res.code !== 0) {
			// this.$message.warning(res.msg);
			return;
		}

		if (res.data) {
			contrastData.xlist = res.data.xlist;
			contrastData.dealResList = res.data.dealResList;
			contrastData.avgDealTimeResList = res.data.avgDealTimeResList;
			contrastData.healthResList = res.data.healthResList;
			contrastData.serverAverageResponseResList = res.data.serverAverageResponseResList;
			if (contrastData.xlist === null) {
				xAxis.value = [];
			} else {
				xAxis.value = contrastData.xlist;
			}
			if (contrastData.dealResList === null) {
				series1.value = [];
			} else {
				series1.value = contrastData.dealResList;
			}

			if (contrastData.avgDealTimeResList === null) {
				series2.value = [];
			} else {
				series2.value = contrastData.avgDealTimeResList;
			}

			if (contrastData.serverAverageResponseResList === null) {
				series3.value = [];
			} else {
				series3.value = contrastData.serverAverageResponseResList;
			}
			if (contrastData.healthResList === null) {
				series4.value = [];
			} else {
				// series4.value = contrastData.healthResList;
				let healthResList = contrastData.healthResList;
				for (let i = 0; i < healthResList.length; i++) {
					for (let j = 0; j < healthResList[i].length; j++) {
						if (healthResList[i][j] !== null) {
							healthResList[i][j] = (healthResList[i][j] * 100).toFixed(2);
						}
					}
				}
				series4.value = healthResList;
			}
		}
	});
}

function handleTimeRangeChange() {
	form.dynamicItem.forEach((item: anyObj) => {
		item.time[0] = parseTime(timeRange.value![0], '{y}-{m}-{d} {h}:{i}:00');
		item.time[1] = parseTime(timeRange.value![1], '{y}-{m}-{d} {h}:{i}:00');
	});
}

function handleTimeDateChange(index: number) {
	const item = form.dynamicItem[index];
	const timeUsec = new Date(item.timeDate).getTime();
	item.time[0] = parseTime(timeUsec, '{y}-{m}-{d} 00:00:00');
	// 判断是否当天，如果是当天，设置为当前时间
	if (parseTime(timeUsec, '{y}-{m}-{d}') === parseTime(new Date().getTime(), '{y}-{m}-{d}')) {
		item.time[1] = parseTime(new Date().getTime(), '{y}-{m}-{d} {h}:{i}:00');
	} else {
		item.time[1] = parseTime(timeUsec + 24 * 60 * 60 * 1000, '{y}-{m}-{d} 00:00:00');
	}
}

// 获取图标
function getRowIcon(val: number) {
	if (val > 0) {
		return 'upicon';
	} else if (val == 0) {
		return 'equalicon';
	} else {
		return 'downiconred';
	}
}

// 根据对比方式同步数据
function syncByComparativeType(flag: string, item: anyObj) {
	if (comparativeType.value === 1) {
		if (flag === 'system') {
			// 相同业务，设置为一样
			form.dynamicItem.forEach((o: any) => {
				o.systemId = item.systemId;
				o.businessCode = '';
				o.businessName = item.businessName;
			});
			for (let i = 0; i < businessName.length; i++) {
				businessName[i] = item.businessName;
			}
		} else if (flag === 'business') {
			form.dynamicItem.forEach((o: anyObj) => {
				o.businessCode = item.businessCode;
			});
			for (let i = 0; i < businessName.length; i++) {
				businessName[i] = item.businessName;
			}
		}
	}
}

// 是否禁用业务下拉选项
function isDisabledBusinessOption(businessCode: string) {
	if (comparativeType.value === 1 || businessCode === '') {
		return false;
	}
	for (let i = 0; i < form.dynamicItem.length; i++) {
		if (form.dynamicItem[i].businessCode === businessCode) {
			return true;
		}
	}
	return false;
}

// 切换对比方式
function handleComparativeTypeChange() {
	if (comparativeType.value === 1) {
		form.dynamicItem.forEach((item: any, index: number) => {
			handleTimeDateChange(index);
		});
	} else {
		handleTimeRangeChange();
	}
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.business_comparative_analysis_container {
	margin: 10px;

	.el-form-item {
		margin-bottom: 5px;
	}

	.el-radio {
		color: #ffffff;
	}
}

.el-row {
	margin-bottom: 20px;
}

.el-col .el-dropdown .el-button {
	width: 200px;
}

.title-icon {
	content: '';
	background: #2beded;
	width: 10px;
	height: 9px;
	border-radius: 50%;
	margin-right: 2px;
	vertical-align: 110%;
	position: absolute;
	display: block;
	left: 31px;
	margin-top: 3px;
}

.title-text {
	color: #fff;
	margin-top: 13px;
	margin-left: 40px;
	font-weight: bold;
	font-size: 18px;
}

:deep(.el-loading-mask) {
	background-color: rgba(255, 255, 255, 0.3);
}
</style>
